// 获取分类，渲染到下拉框的位置
$.ajax({
  url: "/my/category/list",
  success: function (res) {
    if (res.status === 0) {
      let str = "";
      res.data.forEach((item) => {
        str += ` <option value="${item.id}">${item.name}</option>`;
      });
      $("select[name=cate_id]").append(str);
      let form = layui.form;
      form.render("select");
    }
  },
});
// 富文本编辑器
initEditor();
// 封面图片处理
// 创建裁剪区域
// 获取裁剪区的图片
let images = $("#image");
// 设置配置项
let option = {
  // 纵横比(宽高比)
  aspectRatio: 400 / 280, // 正方形
  // 指定预览区域
  preview: ".img-preview", // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
images.cropper(option);
// 点击头像能选择图片
$("button:contains('选择封面')").on("click", function () {
  $("#file").trigger("click");
});
// 更换裁剪区域的图片
$("#file").on("change", function () {
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    images.cropper("replace", url);
  }
});
// 修改分类，增加一个文件域，把name属性值修改成接口需求得
$("form").on("submit", function (e) {
  e.preventDefault();
  let fd = new FormData(this);
  // 处理内容 content
  fd.set("content", tinyMCE.activeEditor.getContent());
  // 裁剪图片，把裁剪得结果追加到fd中
  let canvas = images.cropper("getCroppedCanvas", { width: 400, height: 280 });
  // 通过 toBlob 方法可以把canvas转成 Blob 对象的格式
  canvas.toBlob(function (blob) {
    // 参数blob就是转换后的结果，我们把这个结果加到fd中
    fd.append("cover_img", blob);
    // 检查FormData对象中的数据，直接输入 fd 是看不到数据的，需要通过 forEach 遍历查看fd中的数据
    // fd.forEach((value, key) => {
    //   console.log(key, value);
    // });
    $.ajax({
      url: "/my/article/add",
      type: "POST",
      data: fd,
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message, { time: 500 }, function () {
            location.href = "./list.html";
          });
        }
      },
    });
  });
});
